{% extends "base.html" %}

{% block title %}系统设置 - 头条自动发文系统{% endblock %}
{% block page_title %}系统设置{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <!-- API配置 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-cog text-primary"></i>
                    API配置
                </h5>
            </div>
            <div class="card-body">
                <form id="api-config-form">
                    <div class="mb-3">
                        <label for="deepseek-api-key" class="form-label">DeepSeek API Key</label>
                        <div class="input-group">
                            <input type="password" id="deepseek-api-key" class="form-control" 
                                   placeholder="请输入您的DeepSeek API Key">
                            <button type="button" class="btn btn-outline-secondary toggle-password">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                        <div class="form-text">
                            用于AI文章生成，请前往 <a href="https://platform.deepseek.com" target="_blank">DeepSeek官网</a> 获取API Key
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="max-tokens" class="form-label">最大生成长度</label>
                        <input type="number" id="max-tokens" class="form-control" value="2000" min="500" max="4000">
                        <div class="form-text">控制AI生成文章的最大长度（500-4000字符）</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="temperature" class="form-label">创意程度</label>
                        <input type="range" id="temperature" class="form-range" min="0" max="1" step="0.1" value="0.7">
                        <div class="d-flex justify-content-between">
                            <small>保守</small>
                            <small id="temperature-value">0.7</small>
                            <small>创新</small>
                        </div>
                        <div class="form-text">数值越高，生成的内容越有创意但可能不够准确</div>
                    </div>
                    
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i>
                        保存配置
                    </button>
                    <button type="button" id="test-api" class="btn btn-outline-success">
                        <span class="loading spinner-border spinner-border-sm me-2" role="status"></span>
                        <i class="fas fa-flask"></i>
                        测试连接
                    </button>
                </form>
            </div>
        </div>
        
        <!-- 提示词模板管理 -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-lightbulb text-warning"></i>
                    提示词模板管理
                </h5>
                <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#templateModal">
                    <i class="fas fa-plus"></i>
                    添加模板
                </button>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>名称</th>
                                <th>分类</th>
                                <th>描述</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="templates-tbody">
                            {% for template in templates %}
                            <tr>
                                <td class="fw-bold">{{ template.name }}</td>
                                <td>
                                    <span class="badge bg-secondary">{{ template.category }}</span>
                                </td>
                                <td>{{ template.description or '-' }}</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary edit-template" 
                                            data-id="{{ template.id }}"
                                            data-name="{{ template.name }}"
                                            data-category="{{ template.category }}"
                                            data-prompt="{{ template.prompt }}"
                                            data-description="{{ template.description or '' }}">
                                        <i class="fas fa-edit"></i>
                                        编辑
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger delete-template" 
                                            data-id="{{ template.id }}">
                                        <i class="fas fa-trash"></i>
                                        删除
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    
                    {% if not templates %}
                    <div class="text-center py-4">
                        <i class="fas fa-lightbulb fa-2x text-muted mb-3"></i>
                        <p class="text-muted">暂无自定义模板，点击上方按钮添加</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- 浏览器设置 -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-globe text-info"></i>
                    浏览器设置
                </h5>
            </div>
            <div class="card-body">
                <form id="browser-config-form">
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="headless-mode">
                            <label class="form-check-label" for="headless-mode">
                                无头模式
                            </label>
                        </div>
                        <div class="form-text">启用后浏览器将在后台运行，不显示界面</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="window-size" class="form-label">窗口大小</label>
                        <select id="window-size" class="form-select">
                            <option value="1920,1080">1920x1080</option>
                            <option value="1366,768">1366x768</option>
                            <option value="1280,720">1280x720</option>
                        </select>
                    </div>
                    
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i>
                        保存设置
                    </button>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <!-- 账号信息 -->
        <div class="card mb-4">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-user text-success"></i>
                    当前账号
                </h6>
            </div>
            <div class="card-body">
                <!-- 动态用户信息区域 -->
                <div id="user-info-area">
                    <!-- 已登录状态 -->
                    <div id="logged-in-section" class="text-center" style="display: none;">
                        <div id="user-avatar-container">
                            <img id="user-avatar" src="" alt="头像" class="rounded-circle mb-3" width="80" height="80" style="display: none;">
                            <div id="default-avatar" class="rounded-circle bg-secondary d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 80px; height: 80px;">
                                <i class="fas fa-user text-white fa-2x"></i>
                            </div>
                        </div>
                        <h6 id="user-nickname">用户名</h6>
                        <p class="text-muted" id="user-username">@用户名</p>
                        <span class="badge bg-success">已登录</span>
                        
                        <div class="mt-3">
                            <button class="btn btn-outline-warning btn-sm w-100 mb-2" id="relogin-btn">
                                <i class="fas fa-sync-alt"></i>
                                重新登录
                            </button>
                            <button class="btn btn-outline-danger btn-sm w-100" id="logout-btn">
                                <i class="fas fa-sign-out-alt"></i>
                                退出登录
                            </button>
                        </div>
                    </div>
                    
                    <!-- 未登录状态 -->
                    <div id="not-logged-in-section" class="text-center">
                        <i class="fas fa-user-slash fa-3x text-muted mb-3"></i>
                        <p class="text-muted">未登录</p>
                        <a href="/login" class="btn btn-primary">
                            <i class="fas fa-sign-in-alt"></i>
                            去登录
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 系统信息 -->
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-info-circle text-info"></i>
                    系统信息
                </h6>
            </div>
            <div class="card-body">
                <table class="table table-sm">
                    <tr>
                        <td>系统版本</td>
                        <td>v1.0.0</td>
                    </tr>
                    <tr>
                        <td>Python版本</td>
                        <td id="python-version">-</td>
                    </tr>
                    <tr>
                        <td>浏览器状态</td>
                        <td>
                            <span class="badge bg-success">正常</span>
                        </td>
                    </tr>
                    <tr>
                        <td>数据库</td>
                        <td>SQLite</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 模板编辑模态框 -->
<div class="modal fade" id="templateModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-plus text-success"></i>
                    <span id="modal-title-text">添加提示词模板</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="template-form">
                    <input type="hidden" id="template-id">
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="template-name" class="form-label">模板名称 *</label>
                                <input type="text" id="template-name" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="template-category" class="form-label">分类 *</label>
                                <select id="template-category" class="form-select" required>
                                    <option value="">请选择分类</option>
                                    <option value="科技">科技</option>
                                    <option value="生活">生活</option>
                                    <option value="教育">教育</option>
                                    <option value="娱乐">娱乐</option>
                                    <option value="财经">财经</option>
                                    <option value="其他">其他</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="template-prompt" class="form-label">提示词内容 *</label>
                        <textarea id="template-prompt" class="form-control" rows="4" required 
                                placeholder="请输入提示词内容，例如：写一篇关于人工智能发展的文章"></textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label for="template-description" class="form-label">描述</label>
                        <textarea id="template-description" class="form-control" rows="2" 
                                placeholder="简单描述这个模板的用途"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" id="save-template" class="btn btn-success">
                    <span class="loading spinner-border spinner-border-sm me-2" role="status"></span>
                    <i class="fas fa-save"></i>
                    保存
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 温度值显示
    $('#temperature').on('input', function() {
        $('#temperature-value').text($(this).val());
    });
    
    // 密码显示切换
    $('.toggle-password').click(function() {
        const input = $(this).siblings('input');
        const icon = $(this).find('i');
        
        if (input.attr('type') === 'password') {
            input.attr('type', 'text');
            icon.removeClass('fa-eye').addClass('fa-eye-slash');
        } else {
            input.attr('type', 'password');
            icon.removeClass('fa-eye-slash').addClass('fa-eye');
        }
    });
    
    // API配置保存
    $('#api-config-form').submit(function(e) {
        e.preventDefault();
        showAlert('API配置已保存', 'success');
    });
    
    // 测试API连接
    $('#test-api').click(function() {
        showLoading(this, true);
        
        // 模拟测试
        setTimeout(function() {
            showLoading('#test-api', false);
            showAlert('API连接测试成功', 'success');
        }, 2000);
    });
    
    // 浏览器配置保存
    $('#browser-config-form').submit(function(e) {
        e.preventDefault();
        showAlert('浏览器设置已保存', 'success');
    });
    
    // 添加模板
    $('#save-template').click(function() {
        const name = $('#template-name').val().trim();
        const category = $('#template-category').val();
        const prompt = $('#template-prompt').val().trim();
        const description = $('#template-description').val().trim();
        
        if (!name || !category || !prompt) {
            showAlert('请填写必填字段', 'warning');
            return;
        }
        
        showLoading(this, true);
        
        $.post('/api/save-template', {
            name: name,
            category: category,
            prompt: prompt,
            description: description
        })
        .done(function(response) {
            if (response.success) {
                showAlert('模板保存成功', 'success');
                $('#templateModal').modal('hide');
                
                // 添加到表格
                const newRow = `
                    <tr>
                        <td class="fw-bold">${name}</td>
                        <td><span class="badge bg-secondary">${category}</span></td>
                        <td>${description || '-'}</td>
                        <td>
                            <button class="btn btn-sm btn-outline-primary edit-template" 
                                    data-id="${response.template_id}"
                                    data-name="${name}"
                                    data-category="${category}"
                                    data-prompt="${prompt}"
                                    data-description="${description}">
                                <i class="fas fa-edit"></i>
                                编辑
                            </button>
                            <button class="btn btn-sm btn-outline-danger delete-template" 
                                    data-id="${response.template_id}">
                                <i class="fas fa-trash"></i>
                                删除
                            </button>
                        </td>
                    </tr>
                `;
                $('#templates-tbody').append(newRow);
                
                // 重新绑定事件
                bindTemplateEvents();
            } else {
                showAlert(response.message, 'danger');
            }
        })
        .fail(function() {
            showAlert('保存失败，请重试', 'danger');
        })
        .always(function() {
            showLoading('#save-template', false);
        });
    });
    
    // 绑定模板操作事件
    function bindTemplateEvents() {
        // 编辑模板
        $('.edit-template').off('click').on('click', function() {
            const id = $(this).data('id');
            const name = $(this).data('name');
            const category = $(this).data('category');
            const prompt = $(this).data('prompt');
            const description = $(this).data('description');
            
            $('#template-id').val(id);
            $('#template-name').val(name);
            $('#template-category').val(category);
            $('#template-prompt').val(prompt);
            $('#template-description').val(description);
            
            $('#modal-title-text').text('编辑提示词模板');
            $('#templateModal').modal('show');
        });
        
        // 删除模板
        $('.delete-template').off('click').on('click', function() {
            const id = $(this).data('id');
            const $row = $(this).closest('tr');
            
            if (confirm('确定要删除这个模板吗？')) {
                // 这里应该调用删除API
                $row.remove();
                showAlert('模板已删除', 'success');
            }
        });
    }
    
    // 初始绑定事件
    bindTemplateEvents();
    
    // 模态框关闭时重置表单
    $('#templateModal').on('hidden.bs.modal', function() {
        $('#template-form')[0].reset();
        $('#template-id').val('');
        $('#modal-title-text').text('添加提示词模板');
    });
    
    // 加载系统信息
    $('#python-version').text('3.8+');
    
    // 检查并更新用户登录状态
    function updateUserInfo() {
        $.get('/api/connection-status')
            .done(function(response) {
                if (response.success && response.is_logged_in && response.user_info) {
                    // 显示已登录状态
                    showLoggedInUser(response.user_info);
                } else {
                    // 显示未登录状态
                    showNotLoggedIn();
                }
            })
            .fail(function() {
                // 连接失败，显示未登录状态
                showNotLoggedIn();
            });
    }
    
    // 显示已登录用户信息
    function showLoggedInUser(userInfo) {
        $('#not-logged-in-section').hide();
        $('#logged-in-section').show();
        
        // 更新用户名和昵称
        if (userInfo.nickname) {
            $('#user-nickname').text(userInfo.nickname);
        } else if (userInfo.username) {
            $('#user-nickname').text(userInfo.username);
        }
        
        if (userInfo.username) {
            $('#user-username').text('@' + userInfo.username);
        }
        
        // 更新头像
        if (userInfo.avatar_url) {
            $('#user-avatar').attr('src', userInfo.avatar_url).show();
            $('#default-avatar').hide();
        } else {
            $('#user-avatar').hide();
            $('#default-avatar').show();
        }
    }
    
    // 显示未登录状态
    function showNotLoggedIn() {
        $('#logged-in-section').hide();
        $('#not-logged-in-section').show();
    }
    
    // 重新登录按钮
    $('#relogin-btn').click(function() {
        window.location.href = '/login';
    });
    
    // 退出登录按钮
    $('#logout-btn').click(function() {
        if (confirm('确定要退出登录吗？')) {
            // 这里可以添加退出登录的API调用
            showAlert('已退出登录', 'info');
            showNotLoggedIn();
        }
    });
    
    // 页面加载时检查用户状态
    updateUserInfo();
    
    // 定时检查用户状态（每30秒检查一次）
    setInterval(updateUserInfo, 30000);
});
</script>
{% endblock %}
